<!DOCTYPE html>

<head>
	<title></title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		.input {
			width: 200px;
			height: 30px;
			border: 1px solid grey;
			/* div定宽居中 */
			margin: 0 auto;
			width: 100px;
		}

		.border {
			height: 0px;
			width: 0px;
			border-top: 100px solid skyblue;

			border-right: 100px solid pink;

		}

		.banner-wrap {
			position: relative;
			width: 900px;
			height: 306px;
			margin: 0 auto;

		}

		.banner-wrap img {
			display: block;
			width: 100%;
		}

		.mask {
			top: 0;
			left: 0;
			position: absolute;
			width: 100%;
			height: 306px;
			margin: 0 auto;
			background-color: rgba(0, 0, 0, 0.2);

		}

		.logo {
			margin-top: 20px;
			width: 145px;
			height: 35px;
			border: 2px solid black;
			text-align: center;
		}

		.title>p:first-child {
			font-size: 22px;
			background-color: white;
			display: inline-block;
			
		}

		.logo>p:nth-child(2) {
			font-size: 12px;
		}
		.title{
			margin-top: -12px;
		}
	</style>
</head>

<body>
	<!-- <div class="input" contenteditable >
		
	</div> -->
	<p>
		dfsdfsf
	</p>
	<div class="border"></div>
	<div class="banner-wrap">
		<img src="images/QQ图片20180802104702.jpg" alt="">
		<div class="mask"></div>
	</div>
	<div class="logo">
		<div class="title">
			<p>关于我们</p>
		</div>
		<div class="con">
			<p>ABOUT US</p>
		</div>

	</div>
</body>

</html>